<template>
	<view class="content">
		<view class="scrollBox">
			<view class="you-scroll" style="min-height: 65%;">
				<view :class="type?'pullDown1':'pullDown'" style="transform: translateY(0px); transition: all 0.3s ease 0s;" :style="">
					<uni-image class="down-icon">
						<image src="/static/img/home/pullDown.jpg" mode="" class="down-icon"></image>
					</uni-image><span>{{pulling}}</span>
				</view>
				<view class="you-scroll-inner" style="transform: translateY(0px); transition: transform 0.3s ease 0s;">
					<scroll-view scroll-y="true" class="scroll-Y" refresher-enabled="true" :refresher-triggered="triggered" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
						@refresherrestore="onRestore" @refresherabort="onAbort" refresher-default-style="none" scroll-with-animation="true" :refresher-threshold="80" refresher-background="#f0f0f0" >
						<view class="you-scroll-content">
							<view class="list" v-for="(item,index) in journalList" :key="index">
								<view class="">
									<view class="time">
										{{item.riqi}}
									</view>
									<view class="detail">
										<view class="item" v-for="(row,i) in item.data.data" :key="i">
											<view class="point">
												<view class="line">
													
												</view>
												<view class="BUY" v-if="!row.order_type">
													
												</view>
												<view class="SELL" v-if="row.order_type">
													
												</view>
												<view class="line">
													
												</view>
											</view>
											<view class="text">
												<text>{{row.content}}</text>
												<text>{{row.c_time}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<shopro-empty v-if="!journalList.length" :emptyData="emptyData"></shopro-empty>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				emptyData: {
					img: '/static/img/home/empty_goods.png',
					tip: '暂无数据'
				},
				triggered: false,
				pulling:'下拉刷新',
				type:false,
				journalList:[],
				page: 1,
				size: 20,
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		},
		onLoad() {
			this._freshing = false;
			this.triggered = true;
		},
		onShow() {
			this.journal()
		},
		methods:{
			journal(){
				let data = {
					page: this.page,
					list_rows: this.size
				}
				this.$api.tradeSellLog(data).then(res => {
					if (res.code == 1) {
						this.journalList = res.data;
				
					}
				});
			},
			// loadMore() {
			// 	if (this.hasMore) {
			// 		this.page++;
			// 		this.log();
			// 	}
			// },
			onPulling(e) {
				this.type = true;
				this.pulling = '松开刷新'
				// console.log("onpulling", e);
			},
			onRefresh() {
				this.pulling = '加载中...'
				this.journal()
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			onRestore() {
				this.type = false;
				this.triggered = 'restore'; // 需要重置
				
			},
			onAbort() {
				this.type = false;
			}
		},
		
	}
</script>

<style lang="scss">
	.content{
	    overflow: scroll;
	    height: 100%;
	    background-color: #f0f0f0;
	}
	.scrollBox{
	    // height: calc(100vh - 100px);
	    overflow: scroll;
	}
	.you-scroll {
		width: 100%;
		height: 100%;
		// overflow: hidden;
		position: relative;
		// /deep/ .uni-scroll-view-refresher {
		// 	height: 50px !important;
		// }
		.pullDown {
			z-index: 9999999;
			width: 100%;
			height: 40px;
			line-height: 50px;
			text-align: center;
			font-size: 14px;
			overflow: hidden;
			-webkit-transform: translateY(-100%);
			transform: translateY(-100%);
			position: absolute;
			top: -40px;
			left: 0;
		
			.down-icon{
			    width: 40px;
			    height: 40px;
			    display: inline-block;
			    vertical-align: middle;
			}
			span {
			    white-space: nowrap;
			    overflow: hidden;
			    display: inline-block;
			    vertical-align: middle;
			    color: #000;
			}
		}
		.pullDown1 {
			z-index: 9999999;
			width: 100%;
			height: 80px;
			line-height: 50px;
			text-align: center;
			font-size: 14px;
			overflow: hidden;
			-webkit-transform: translateY(-100%);
			transform: translateY(-100%);
			position: absolute;
			top: 0px;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			.down-icon{
			    width: 40px;
			    height: 32px;
			    display: inline-block;
			    vertical-align:inherit;
			}
			span {
			    white-space: nowrap;
			    overflow: hidden;
			    display: inline-block;
			    vertical-align: middle;
			    color: #000;
			}
		}
		.you-scroll-inner {
			width: 100%;
			height: 100%;
			// overflow: hidden;
			position: relative;
		}
	
		.you-scroll-content {
			overflow: hidden;
			.list .item:first-child > .point .line:first-child {
			    width: 0 !important;
			}
			.list .item:last-child > .point .line:last-child {
			    width: 0 !important;
			}
			.list{
				margin: 30rpx 42rpx;
				
				.detail{
				    background-color: #fff;
				    padding: 30rpx;
					.item {
					    border-radius: 5px;
						 display: flex;
						 .text {
						     display: flex;
						     flex: 1;
						     flex-wrap: wrap;
						     flex-direction: column;
						 }
						 .text uni-text:nth-child(1) {
						     word-break: break-all;
						     font-size: 13px;
						     padding-top: 7px;
						 }
						 .text uni-text:last-child {
						     padding-bottom: 14rpx;
						     margin-top: 8rpx;
						     font-size: 13px;
						     color: #8d9299;
						 }
						 .point{
						     width: 52rpx;
						     position: relative;
						     margin-right: 30rpx;
							 .line:first-child {
							     position: absolute;
							     height: 50%;
							     background-color: #e3e8ee;
							     width: 1px;
							     top: 0;
							     left: 50%;
							     -webkit-transform: translate(50%);
							     transform: translate(50%);
							 }
							  .dian{
							     position: absolute;
							     top: 50%;
							     left: 50%;
							     -webkit-transform: translate(-50%,-50%);
							     transform: translate(-50%,-50%);
							     width: 26px;
							     height: 26px;
							     background-color: $zhuse;
							     -webkit-border-radius: 50%;
							     border-radius: 50%;
							     z-index: 20;
							 }
							 .SELL{
							     position: absolute;
							     top: 50%;
							     left: 50%;
							     -webkit-transform: translate(-50%,-50%);
							     transform: translate(-50%,-50%);
							     width: 26px;
							     height: 26px;
							     background-image: url();
							     background-repeat: no-repeat;
							     background-size: contain;
							     z-index: 20;
							 }
							 .BUY {
							     position: absolute;
							     top: 50%;
							     left: 50%;
							     -webkit-transform: translate(-50%,-50%);
							     transform: translate(-50%,-50%);
							     width: 26px;
							     height: 26px;
							     background-image: url();
							     background-repeat: no-repeat;
							     background-size: contain;
							     z-index: 20;
							 }
							  .line:last-child {
							     position: absolute;
							     height: 50%;
							     background-color: #e3e8ee;
							     width: 1px;
							     left: 50%;
							     bottom: 0px;
							     -webkit-transform: translate(50%);
							     transform: translate(50%);
							 }
						 }
					}
				}
				.time {
				    font-size: 15px;
				    color: #000;
				    margin: 20rpx 0;
				}
			}	
		}
	
	}
	
</style>
